<template>
  <div class="header">
    <div class="header-left">
      <img class="img" src="../../../assets/image/logo.png">
    </div>
    <div class="header-mid">
      <div class="mid-top">
        <div>欢迎网上订餐</div>
        <div @click="toggleModal">收藏本订餐网站</div>
        <Modal v-show="showModal" @on_cancel="cancel"></Modal>
      </div>
      <div class="mid-bot">
        <nav class="navigtion">
          <a>
            <router-link to="/index">首页</router-link>
          </a>
          <a>
            <router-link to="/">重新登录</router-link>
          </a>
          <a>
            <router-link to="/index">个人中心</router-link>
          </a>
         <a>
            <router-link to="/mobile">手机订餐APP</router-link>
          </a>
           <a>
            <router-link to="/center">帮助中心</router-link>
          </a>
        </nav>
      </div>
    </div>
    <div class="header-right">
      在线客服
      <span class="iconfont">&#xe617;</span>
    </div>
  </div>
</template>

<script>
import Modal from './Modal.vue'
export default {
  name: 'HomeHeader',
  data: function () {
    return {
      showModal: false,
      active: 0,
      arr: ['首页', '重新登录', '个人中心', '手机订餐APP', '帮助中心']
    }
  },
  components: {
    Modal: Modal
  },
  methods: {
    toggleModal () {
      this.showModal = !this.showModal
    },
    cancel () {
      console.log('1')
      this.showModal = false
    },
    setTab: function (name, index, menus) {
      // 页面切换
      this.nowIndex = index
      this.menu_index = index + 1
    }
  }
}
</script>

<style lang="stylus" scoped>
.header {
  display: flex
  height: 1.6rem
  width: 20rem
  margin: 0 auto
  border-bottom: 2px solid red

  .header-left {
    width: 5rem
    height: 2rem
  }

  .header-right {
    background: rgb(198, 0, 10)
    color: white
    line-height: 0.5rem
    padding-left: 0.1rem
    width: 0.4rem
    height: 2.5rem
    margin-top: 1.62rem
  }

  .header-mid {
    display: flex
    flex-wrap: wrap
    width: 80%
    height: 1.5rem

    .mid-top {
      display: flex
      justify-content: space-between
      width: 100%
      height: 0.3rem
      margin-top: 0.15rem
      cursor: pointer
    }

    .mid-bot {
      display: flex
      width: 100%
      height: 0.4rem
      margin-top: 0.4rem

      .navigtion {
        width: 100%
        display: flex
        justify-content: space-around
      }

      .navigtion a {
        color: red
        font-weight: bold
      }
    }
  }
}
</style>
